<template>
    <van-popup :show="props.modelValue" round position="bottom" @click-overlay="onClickOverlay" closeable
        @click-close-icon="onClickOverlay">
        <div class="pop_conent">
            <div class="pop_title">{{ props.title }}</div>
            <!-- 基础信息 -->
            <div class="pop_xhibit" v-if="props.type == 0">
                <div class="pop_xhibit_item">
                    <div class="pop_label">类目：</div>
                    <div class="pop_value">{{ data.productCategoryName }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">品牌：</div>
                    <div class="pop_value">{{ data.brandName }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">对接群：</div>
                    <div class="pop_value">{{ data.groupName }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">规格/材质：</div>
                    <div class="pop_value">{{ data.specs }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">历史最低售价：</div>
                    <div class="pop_value">{{ data.historyPrice }}</div>
                </div>
            </div>
            <!-- 直播补充信息 -->
            <div class="pop_xhibit" v-if="props.type == 1">
                <div class="pop_xhibit_item">
                    <div class="pop_label">发货时间：</div>
                    <div class="pop_value">{{ data.deliveryTime }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">发货地：</div>
                    <div class="pop_value">{{ data.placeDelivery }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">物流/快递：</div>
                    <div class="pop_value">{{ data.logistics }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">适用人群：</div>
                    <div class="pop_value">{{ data.eligibility }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">厂家可用库存：</div>
                    <div class="pop_value">{{ data.factoryStockNum }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">不发货地区：</div>
                    <div class="pop_value">{{ data.noSendArea }}</div>
                </div>
            </div>
            <!-- 商品资质 -->
            <div class="pop_xhibit" v-if="props.type == 2">
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">商品实拍</div>
                    <div class="pop_value pop_wrap pop_image">
                        <div class="mul_imags" v-if="data.productImages">
                            <van-image v-for="(item, index) in data.productImages"
                                :src="item + '?x-oss-process=image/resize,w_300'" :key="index"
                                @click="enlargeImage(item)">
                                <template v-slot:error>加载失败</template>
                            </van-image>
                        </div>
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">备案行政/许可证批件</div>
                    <div class="pop_value pop_wrap pop_image">
                        <div class="mul_imags" v-if="data.voucherImages">
                            <div v-for="(item, index) in data.voucherImages" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">其他资质</div>
                    <div class="pop_value pop_wrap pop_image">
                        <div class="mul_imags" v-if="data.otherImages">
                            <div v-for="(item, index) in data.otherImages" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">营业执照</div>
                    <div class="pop_value pop_wrap pop_image">
                        <IsImgPdf v-if="data.businessImage" :url="data?.businessImage" />
                        <!-- <van-image v-if="data.businessImage" :src="data?.businessImage"
                            @click="enlargeImage(data.businessImage)"><template v-slot:error>加载失败</template></van-image> -->
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">进口货物/原材料报关单</div>
                    <div class="pop_value pop_wrap pop_image">
                        <div class="mul_imags" v-if="data.customsDeclarationImages">
                            <div v-for="(item, index) in data.customsDeclarationImages" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">进口产品备案材料</div>
                    <div class="pop_value pop_wrap pop_image">
                        <div class="mul_imags" v-if="data.customsInformationImages">
                            <div v-for="(item, index) in data.customsInformationImages" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">进口产品原材料检验检疫证明</div>
                    <div class="pop_value pop_wrap pop_image">
                        <div class="mul_imags" v-if="data.customsInspectionImages">
                            <div v-for="(item, index) in data.customsInspectionImages" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">检测报告</div>
                    <div class="pop_value pop_wrap pop_image">
                        <div class="mul_imags" v-if="data.customsTestReportImgaes">
                            <div v-for="(item, index) in data.customsTestReportImgaes" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div v-else>无</div>
                    </div>
                </div>
            </div>
            <!-- 商品资质 -->
            <div class="pop_xhibit" v-if="props.type == 3">
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">品牌名称</div>
                    <div class="pop_value pop_wrap">{{ data?.brandName || '无' }}</div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">品牌商标注册证</div>
                    <div class="pop_value pop_wrap pop_image">
                        <IsImgPdf v-if="data.brandImages" :url="data.brandImages" />
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">商标授权使用证明</div>
                    <div class="pop_value pop_wrap pop_image">
                        <IsImgPdf v-if="data.usageImages" :url="data.usageImages" />
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">授权使用品类</div>
                    <div class="pop_value pop_wrap">
                        {{ data?.usages || '无' }}
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">店铺销售授权</div>
                    <div class="pop_value pop_wrap pop_image">
                        <IsImgPdf v-if="data.sellImages" :url="data.sellImages" />
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">销售授权品类</div>
                    <div class="pop_value pop_wrap pop_image">
                        {{ data?.sells || '无' }}
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">其他补充资质</div>
                    <div class="pop_value pop_wrap pop_image">
                        <IsImgPdf v-if="data.otherImages" :url="data.otherImages" />
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">联名款/其他授权</div>
                    <div class="pop_value pop_wrap pop_image">
                        <IsImgPdf v-if="data.jointlyImages" :url="data.jointlyImages" />
                        <div v-else>无</div>
                    </div>
                </div>
            </div>
            <!-- 基础信息 -->
            <div class="pop_xhibit" v-if="props.type == 6">
                <div class="pop_xhibit_item">
                    <div class="pop_label">类目：</div>
                    <div class="pop_value">{{ data.productCategoryName }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">品牌：</div>
                    <div class="pop_value">{{ data.brandName }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">对接群：</div>
                    <div class="pop_value">{{ data.groupName }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">规格/材质：</div>
                    <div class="pop_value">{{ data.specs }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">历史最低售价：</div>
                    <div class="pop_value">{{ data.historyPrice }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">备注：</div>
                    <div class="pop_value">{{ data.inAuditRemark }}</div>
                </div>
            </div>
            <!-- 产品实拍 -->
            <div class="pop_xhibit" v-if="props.type == 5">
                <div class="liveShot">
                    <van-image v-for="item in data?.stockImages" :src="item" class="liveShot_img" />
                </div>
            </div>
            <div class="pop_button" @click="onClickOverlay">我知道了</div>
        </div>
    </van-popup>
</template>
<script setup lang="ts">
// import { showImagePreview } from 'vant';
import { defineProps } from 'vue'
import IsImgPdf from '@/components/isImgPdf/index.vue'
const props = defineProps({
    // 是否展示
    modelValue: { type: Boolean, default: false },
    // 展示类型
    type: { type: Number, default: 0 },
    // 展示内容
    data: { type: Object, default: () => { } },
    // 展示title
    title: { type: String, default: '' },
    // 高度
    height: { type: Number, default: 0 },
})
const emit = defineEmits(['update:modelValue'])
// 点击遮罩层时调用的方法
const onClickOverlay = () => {
    emit("update:modelValue", false);
};
/** 图片放大 */
const enlargeImage = (img: string) => {
    console.warn('不可放大', img)
}
</script>
<style lang="less" scoped>
.pop_conent {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 15px;

    .pop_title {
        width: 100%;
        font-weight: 500;
        font-size: 16px;
        color: #1A1B1C;
        text-align: center;
        margin-bottom: 10px;
    }

    .pop_xhibit {
        width: 100%;
        height: calc(100% - 94px);
        overflow: auto;

        .pop_xhibit_item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;

            .pop_wrap {
                width: 100% !important;
            }

            .pop_image {
                height: auto !important;
                line-height: normal !important;
                display: flex !important;

                .van-image {
                    width: 90px;
                    height: 90px;
                }

                .mul_imags {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;

                    .van-image {
                        margin-right: 24px;
                        margin-bottom: 5px;
                    }
                }
            }

            .pop_label {
                width: 100px;
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
            }

            .pop_value {
                width: calc(100% - 100px);
                font-weight: 400;
                font-size: 14px;
                color: #8492AD;
                word-break: break-all;
            }
        }

        .pop_xhibit_items {
            height: auto !important;
        }

        .liveShot {
            max-height: 400px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;

            .liveShot_img {
                width: 150px;
                height: 150px;
                margin-bottom: 10px;
            }
        }
    }

    .pop_button {
        width: 345px;
        height: 44px;
        background: #0094FF;
        border-radius: 23px;
        text-align: center;
        line-height: 44px;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        margin-top: 20px;
    }
}
</style>